<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="header-title">订单中心</text>
		</view>

		<!-- 菜单栏 -->
		<view class="menu-bar">
			<text v-for="(menu, index) in menus" :key="index" :class="['menu-item', { active: currentMenu === menu.status }]"
				@click="changeMenu(menu.status)">
				{{ menu.label }}
			</text>
		</view>

		<!-- 订单列表 -->
		<view class="order-item" v-for="(order, index) in filteredOrders" :key="index" @click="goToOrderDetail(order)">
		    <!-- 订单编号和状态 -->
		    <view class="order-header">
		        <text class="order-id">订单编号: {{ order.orderId }}</text>
		        <text :class="['order-status', order.statusClass]">{{ order.status }}</text>
		    </view>
		
		    <!-- 商品信息 -->
		    <view class="order-products">
		        <view class="product-item" v-for="(product, pIndex) in order.products" :key="pIndex">
		            <image :src="product.image" class="product-image"></image>
		            <view class="product-info">
		                <text class="product-name">{{ product.name }}</text>
		                <text class="product-price">¥{{ product.price }} x {{ product.quantity }}</text>
		            </view>
		        </view>
		    </view>
		
		    <!-- 订单底部信息 -->
		    <view class="order-footer">
		        <text class="total-amount">总金额: ¥{{ order.totalAmount }}</text>
		        <text class="order-time">下单时间: {{ order.time }}</text>
		    </view>
		</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 菜单项
				menus: [{
						label: '全部',
						status: 'all'
					},
					{
						label: '待发货',
						status: 'pendingShipment'
					},
					{
						label: '待收货',
						status: 'pendingReceipt'
					},
					{
						label: '评价',
						status: 'toBeReviewed'
					},
					{
						label: '已完成',
						status: 'completedOrders'
					}
				],
				// 当前菜单项
				currentMenu: 'all',
				// 存储的选中商品
				selectedItems: [],
				// 模拟订单数据
				orders: []
			};
		},
		computed: {
			// 根据当前菜单项过滤订单数据
			filteredOrders() {
				if (this.currentMenu === 'all') {
					return this.orders;
				}
				return this.orders.filter(order => order.statusCode === this.currentMenu);
			}
		},
methods: {
    // 切换菜单项
    changeMenu(status) {
        this.currentMenu = status;
    },
    // 获取本地存储的选中商品
    loadSelectedItems() {
        uni.getStorage({
            key: 'selectedItems',
            success: (res) => {
                this.selectedItems = res.data || [];
                console.log('获取到的选中商品数据:', this.selectedItems); 
                this.generateOrders(); // 根据选中的商品生成订单
            },
            fail: (err) => {
                console.error('获取存储数据失败:', err);
            }
        });
    },

    // 根据选中商品生成订单
    generateOrders() {
        if (this.selectedItems.length > 0) {
            this.orders = this.selectedItems.map(item => ({
                orderId: `2024${Math.floor(Math.random() * 100000)}`,
                status: '待支付',
                statusClass: 'pending',
                time: new Date().toLocaleString(),
             totalAmount: (item.goodsPrice * item.goodsNum).toFixed(2),
                statusCode: 'pendingShipment',
                products: [{
                    name: item.goodsName,
                    price: item.goodsPrice,
                    quantity: item.goodsNum,
                    image: item.goodsUrl
                }]
            }));
        }
    },
    goToOrderDetail(order) {
        uni.navigateTo({
            url: `/pages/profile/acknowledgementOfOrder?orderData=${encodeURIComponent(JSON.stringify(order))}`
        });
    }
},
		onLoad() {
			this.loadSelectedItems();
		}
	};
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		height: 100vh;
	}

	.header {
		background-color: #2ac2d2;
		padding: 20px;
		text-align: center;
		color: #fff;
	}

	.header-title {
		font-size: 18px;
		font-weight: bold;
	}

	.menu-bar {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		padding: 10px 0;
		border-bottom: 1px solid #e0e0e0;
	}

	.menu-item {
		font-size: 16px;
		color: #666;
	}

	.menu-item.active {
		color: #2ac2d2;
		font-weight: bold;
	}

	.order-list {
		padding: 10px;
	}

	.no-orders {
		text-align: center;
		color: #999;
		font-size: 16px;
		margin-top: 20px;
	}

	.order-item {
		background-color: #fff;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 15px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.order-id {
		font-size: 14px;
		color: #333;
	}

	.order-status {
		font-size: 14px;
		padding: 2px 5px;
		border-radius: 5px;
	}

	.order-status.pending {
		color: #ff9800;
		background-color: #fff3e0;
	}

	.order-status.completed {
		color: #4caf50;
		background-color: #e8f5e9;
	}

	.order-status.receiving {
		color: #03a9f4;
		background-color: #e1f5fe;
	}

	.order-products {
		border-top: 1px solid #f0f0f0;
		padding-top: 10px;
		margin-top: 10px;
	}

	.product-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.product-image {
		width: 60px;
		height: 60px;
		border-radius: 5px;
		margin-right: 10px;
	}

	.product-info {
		flex: 1;
	}

	.product-name {
		font-size: 14px;
		color: #333;
	}

	.product-price {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.order-footer {
		border-top: 1px solid #f0f0f0;
		padding-top: 10px;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}

	.total-amount {
		font-size: 14px;
		color: #333;
		font-weight: bold;
	}

	.order-time {
		font-size: 12px;
		color: #999;
	}
</style>